import { PropsWithChildren, forwardRef } from "react"

type BoxProps = PropsWithChildren<{
  height: number
  text?: string
}>

export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
  { height, text, children },
  ref
) {
  return (
    <div ref={ref} style={{ height, flex: 1 }}>
      <div hidden={!text} style={{ height: 32 }}>
        {text}
      </div>
      <div
        style={{
          backgroundColor: "#f4f6f8",
          display: "flex",
          flexDirection: "column",
          overflow: "auto",
          height: height - (text ? 32 : 0)
        }}
      >
        {children}
      </div>
    </div>
  )
})
